{% block task_toolbar %}
<div id="dialog-createTask-cycle-{{cycle.pk}}" title="Create new Task">
    <p class="validateTips">All form fields are required.</p>
    <form>
    <fieldset>
        <label for="name">Name</label>
        <br>
        <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" width=100%/>
        <br>
        <label for="fonctionalite">Fonctionalite</label>
        <br>
        <input type="text" name="fonctionalite" id="fonctionalite" class="text ui-widget-content ui-corner-all" />
        <br>
        <label for="description">Description</label>
        <br>
        <textarea cols="40" rows="10" name="description" id="description" class="text ui-widget-content ui-corner-all"></textarea>
    </fieldset>
    </form>
</div>
<button id="button-create-task-cycle-{{cycle.pk}}">Create new Task</button>

<script type="text/javascript" chaset=utf-8"">
        function setErrorMessage( t ) {
            tips
                .text( t )
                .addClass( "ui-state-error" );
            //setTimeout(function() {
            //    tips.removeClass( "ui-state-error", 1500 );
            //}, 500 );
        }
        function checkName(o) {
            if ( o.val().length > 200 || o.val().length < 2 ) {
                o.addClass( "ui-state-error" );
                setErrorMessage("Task name must be between have between 2 and 200 characters." );
                return false;
            } else {
                return true;
            }
        }
        $( "#fonctionalite" ).autocomplete({
            source: "Cycles/get_fonctionalite_complete_list"
        });
        $( "#dialog-createTask-cycle-{{cycle.pk}}" ).dialog({
                    autoOpen: false,
                    //height: 300,
                    //width: 500,
                    modal: true,
                    buttons: {
                        "Create": function() {
                            var namef = $( "#name" ),
                                fonctionalitef = $( "#fonctionalite" ),
                                descriptionf = $( "#description" ),
                                allFields = $( [] )
                                    .add( namef )
                                    .add( fonctionalitef )
                                    .add( descriptionf ),
                                tips = $( ".validateTips" ),
                                tab = $( "#button-create-task-cycle-{{cycle.pk}}" ).parent().parent();
                            var bValid = true;
                            allFields.removeClass( "ui-state-error" );
                            bValid = bValid && checkName( namef );
                            dialog = $(this);
                            data = {
                                tname: namef.val(),
                                fname: fonctionalitef.val(),
                                description: descriptionf.val(),
                                cycle_pk: {{cycle.pk}} 
                            };
                            $.getJSON(
                                "Cycles/new_task_in_cycle", data, function(ret) {
                                    retcode = ret[0];
                                    console.log("Result of new_task_in_cycle:", ret);
                                    if ( retcode == 0 ) {
                                        console.log($( "#button-create-task-cycle-{{cycle.pk}}" ).parent().find(".task-list") );
                                        $( "#button-create-task-cycle-{{cycle.pk}}" ).parent().find(".task-list").html(ret[1]);
                                        //tab.tabs("select", 0);
                                        //tab.tabs("select", 1);
                                        $( dialog ).dialog( "close" );
                                    }
                                    else
                                    {
                                        if ( retcode == 1 )
                                        {
                                            fonctionalitef.addClass( "ui-state-error" );
                                        }
                                        else
                                        {
                                            namef.addClass( "ui-state-error" );
                                        }
                                        setErrorMessage( ret[1] );
                                    }
                                }
                            );
                        },
                        Cancel: function() {
                            $( this ).dialog( "close" );
                        }
                    },
                    close: function() {
                        allFields.val("").removeClass( "ui-state-error" );
                    }
                });
        $( "#button-create-task-cycle-{{cycle.pk}}" )
            .button()
            .click(function() {
                $( "#dialog-createTask-cycle-{{cycle.pk}}" ).dialog( "open" );
            });
</script>

{% endblock task_toolbar %}
